import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:inmotion_pro/l10n/local.dart';
import 'package:lx_widgets_library/button/rounded_inkwell.dart';

import '../../../config/r.dart';

// 骑行记录组件
class CyclingRecordCover extends StatelessWidget {
  final DateTime? rideDate;
  final Duration? rideDuration;
  final double? rideDistance; // 单位：公里
  final bool hasRecord;
  final VoidCallback? onMorePressed;

  const CyclingRecordCover({
    Key? key,
    this.rideDate,
    this.rideDuration,
    this.rideDistance,
    this.hasRecord = false,
    this.onMorePressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (!hasRecord) {
      return _buildEmptyCover();
    }
    return _buildRecordCover();
  }

  // 构建无记录时的封面
  Widget _buildEmptyCover() {
    return SizedBox(
      width: double.infinity,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            child: Image.asset(
              R.noCyclingRecordImage,
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(24.w),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(
                    Icons.directions_bike,
                    size: 36,
                    color: Colors.white,
                  ),
                  SizedBox(height: 16.w),
                  Text(
                    local.no_cycling_record,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  SizedBox(height: 8.w),
                  Text(
                    local.start_your_first_ride,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 构建有记录时的封面
  Widget _buildRecordCover() {
    return SizedBox(
      width: double.infinity,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            child: Image.asset(
              R.hasCyclingRecordImage,
              fit: BoxFit.cover,
            ),
          ),

          // 更多按钮
          Positioned(
            top: 12.w,
            right: 12.w,
            child: RoundedInkWell(
              onTap: onMorePressed,
              child: Padding(
                padding: EdgeInsets.all(8.w),
                child: Icon(
                  Icons.more_horiz,
                  color: Colors.white.withOpacity(0.9),
                  size: 24.w,
                ),
              ),
            ),
          ),

          // 内容区域
          Padding(
            padding: EdgeInsets.all(24.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 标题
                Text(
                  local.latest_ride,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                SizedBox(height: 8.w),

                // 骑行日期
                Text(
                  _formatDate(rideDate!),
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                SizedBox(height: 20.w),

                // 数据行
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // 骑行时长
                    _buildDataItem(
                      icon: Icons.timer_outlined,
                      value: _formatDuration(rideDuration!),
                      label: local.cycling_duration,
                    ),

                    // 骑行距离
                    _buildDataItem(
                      icon: Icons.directions_bike,
                      value: '${rideDistance!.toStringAsFixed(1)}km',
                      label: local.cycling_distance,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建数据项组件
  Widget _buildDataItem({
    required IconData icon,
    required String value,
    required String label,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(icon, color: Colors.white, size: 20.w),
            SizedBox(width: 8.w),
            Text(
              value,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 16,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
        SizedBox(height: 4.w),
        Text(
          label,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
        ),
      ],
    );
  }

  // 格式化时长显示
  String _formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    final hours = twoDigits(duration.inHours);
    final minutes = twoDigits(duration.inMinutes.remainder(60));
    final seconds = twoDigits(duration.inSeconds.remainder(60));
    return '$hours:$minutes:$seconds';
  }

  // 格式化日期显示
  String _formatDate(DateTime date) {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    return '${date.year}-${twoDigits(date.month)}-${twoDigits(date.day)}';
  }
}
